<template>
  <div>
    <!--<Divider />
    <Form v-if="floordata.length === 0" :inline="true" :model="form" :label-width="40">
      <FormItem label="层数">
        <Input v-model="form.ceng"></Input>
      </FormItem>

      <FormItem label="户数">
        <Input v-model="form.hu"></Input>
      </FormItem>

      <Button class="ml10" @click="create">生成楼层</Button>
      &lt;!&ndash;<Button class="ml10" @click="clear">清空楼层</Button>
      <Button class="ml10" @click="save">保存数据</Button>&ndash;&gt;
    </Form>-->

    <div v-for="(item, index) in floordata" :key="'a' + index" class="mt10">

      <Row>
        <Input v-if="editCeng === index " style="width:60px" size="small"
               v-model="currentCeng"></Input>
        <div v-else style="width:60px;" class="fl text-center cengTitle">{{item.title}}</div>
        <ButtonGroup class="ml10" v-if="editCeng === index">
          <Button size="small" class="ml10" @click="saveCeng(index)">保存</Button>
          <Button size="small" class="ml10" @click="cancelCeng(index)">取消</Button>
        </ButtonGroup>
        <Button type="info" v-else size="small" class="ml10" @click="updateCeng(index)">修改层名称</Button>
        <Button type="primary" size="small" class="ml10" :loading="loading" @click="insertCeng(index)">插入一层</Button>
        <Button type="error" size="small" class="ml10" @click="removeCeng(index)">删除该层</Button>
        <Button type="primary" size="small" class="ml10" :loading="loading2" @click="insertHu(index)">添加一户</Button>
        <ButtonGroup class="ml10">
          <Button size="small" :loading="loadingUp" :disabled="floordata.length <= 1 || index === 0" @click="up(index)">
            <Icon type="ios-arrow-up"></Icon>
            上移
          </Button>
          <Button size="small" :loading="loadingDown" :disabled="floordata.length <= 1 || index === floordata.length - 1" @click="down(index)">
            下移
            <Icon type="ios-arrow-down"></Icon>
          </Button>
        </ButtonGroup>
      </Row>

      <Row class="mt10">
        <div style="width:350px; height:35px;" v-for="(item1, index1) in item.list" :key="'b' + index1"
             class="ml10 mt5 fl text-center pointer huDiv">
          <template v-if="edit.i === index && edit.j === index1">
            <Input class="hu_input" v-model="current"/>
            <Button class="btn ml5" slot="append" icon="md-checkmark" @click="ok(index, index1, item1)"></Button>
            <Button class="btn ml5" slot="append" icon="md-close" @click="close"></Button>
            <Button class="btn ml5" slot="append" icon="md-trash" @click="del(index, index1, item1)"></Button>
            <Button class="btn ml5" :loading="loadingBack" :disabled="item.list.length <= 1 || index1 === 0" @click="back(index, index1)">
              <Icon type="ios-arrow-back"></Icon>
            </Button>
            <Button class="btn ml3" :loading="loadingForward" :disabled="item.list.length <= 1 || index1 === item.list.length - 1" @click="forward(index, index1)">
              <Icon type="ios-arrow-forward"></Icon>
            </Button>
          </template>
          <div v-else @click="clickhu(index, index1, item1)" style="padding-top:6px;">{{item1.title}}</div>
        </div>
      </Row>
      <Divider dashed size="small" />
    </div>

  </div>
</template>

<script>
import {
  auditmailfloor_create,
  auditmailfloor_updatedelfloor
} from '@/api/eventlist'

export default {

  name: 'unit',

  data () {
    return {
      editCeng: -1,
      currentCeng: '',
      edit: {
        i: -1,
        j: -1
      },
      current: '',
      form: {
        ceng: 1,
        hu: 1
      },
      floordata: this.fdata,
      cfloordata: [], // 临时层户信息
      cengLoading: true, // 删除状态
      currentPath: this.path,
      loading: false, // 层
      loading2: false, // 户
      loadingUp: false, // 上移
      loadingDown: false, // 下移
      loadingBack: false, // 左移
      loadingForward: false // 右移
    }
  },
  props: {
    unit: {
      type: String,
      default: '1'
    },
    fdata: {
      type: Array,
      default: function () {
        return []
      }
    },
    path: {
      type: String,
      default: ''
    }
  },
  components: {},
  computed: {},
  methods: {
    // 废弃创建方法已迁移至maintain页
    create () {
      this.floordata = []
      for (let i = 0; i < this.form.ceng; i++) {
        let obj = {
          title: (i + 1) + 'F',
          list: []
        }
        for (let j = 0; j < this.form.hu; j++) {
          obj.list.push({
            title: this.unit + '-' + (i + 1) + '-' + (j + 1)
          })
        }
        this.cfloordata.push(obj)
      }
      this.$Modal.confirm({
        title: '提示',
        content: '确认生成' + this.form.ceng + '层' + this.form.hu + '户的楼么？',
        onOk: () => {
          this.floordata = this.cfloordata
          this.save()
        },
        onCancel: () => {
        }
      })
    },
    clickhu (i, j, item) {
      // console.log(i)
      // console.log(j)
      // console.log(item)
      // console.log(this.floordata[i].list[j])
      this.edit.i = i
      this.edit.j = j
      this.current = item.title
    },
    // 废弃清空方法
    clear () {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>确认清空此单元内所有数据么？</p >',
        onOk: () => {
          this.edit.i = -1
          this.edit.j = -1
          this.current = ''
          this.floordata = []
          this.cfloordata = []
          this.$Message.success('删除成功')
        },
        onCancel: () => {
          this.$Message.info('操作已取消')
        }
      })
    },
    ok (i, j, item) {
      const newCeng = {
        id: this.floordata[i].list[j].id,
        title: this.current
      }
      auditmailfloor_create(newCeng).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success('操作成功')
          this.floordata[i].list[j].title = this.current
          this.edit.i = -1
          this.edit.j = -1
          this.current = ''
        } else {
          this.$Message.error('操作失败')
        }
      })
    },
    del (i, j) {
      // console.log(i)
      // console.log(j)
      this.$Modal.confirm({
        title: '提示',
        content: '确认删除此户么？',
        onOk: () => {
          const newCeng = {
            id: this.floordata[i].list[j].id
          }
          auditmailfloor_updatedelfloor(newCeng).then(res => {
            if (res.data.errcode === 0) {
              this.$Modal.remove()
              if (i > -1) {
                this.floordata[i].list.splice(j, 1)
                this.edit.i = -1
                this.edit.j = -1
                this.current = ''
              }
              this.$Message.success('操作成功')
            } else {
              this.$Modal.remove()
              this.$Message.error('操作失败')
            }
          })
        },
        onCancel: () => {
        }
      })
    },
    close () {
      // console.log('close')
      this.edit.i = -1
      this.edit.j = -1
      this.current = ''
      this.$Message.info('操作已取消')
    },
    save () {
      // console.log('保存数据', this.floordata)
      this.$emit('save', this.floordata)
    },
    // 修改层
    updateCeng (i) {
      this.editCeng = i
      this.currentCeng = this.floordata[i].title
    },
    // 插入层
    insertCeng (i) {
      let arrF = ''
      let arrE = ''
      arrF = this.floordata.slice(i, i + 1)
      arrE = this.floordata.slice(i + 1, i + 2)
      if (arrE.length === 0) {
        let fSort = arrF[0].asort
        let fSortNum = parseInt(fSort) + 10
        // console.log('加10后', fSortNum)
        let sort = { asort: fSortNum }
        arrE.push(sort)
      }
      // console.log('前', arrF)
      // console.log('后', arrE)
      const midSort = (arrF[0].asort + arrE[0].asort) / 2
      // console.log('中间值', midSort)
      const newCeng = {
        level: '103',
        list: [],
        path: this.currentPath,
        pid: this.floordata[i].pid,
        title: '未定义',
        asort: midSort
      }
      this.loading = true
      auditmailfloor_create(newCeng).then(res => {
        if (res.data.errcode === 0) {
          // let arr = this.floordata.slice(i + 1)
          // arr.forEach((ceng) => {
          //   console.log(ceng)
          //   let num = ceng.title.split('')
          //   let newNum = (parseInt(num[0]) + 1) + 'F'
          //   ceng.title = newNum
          //   ceng.list.forEach((Hu) => {
          //     console.log(Hu)
          //     let HuNum = Hu.title.split('-')
          //     let newHuNum = HuNum[0] + '-' + (parseInt(HuNum[1]) + 1) + '-' + HuNum[2]
          //     Hu.title = newHuNum
          //   })
          // })
          this.floordata.splice(i + 1, 0, newCeng)
          this.loading = false
          this.$emit('refresh')
          this.$Message.success('操作成功')
        } else {
          this.loading = false
          this.$Message.error('操作失败')
        }
      })
    },
    // 删除层
    removeCeng (i) {
      // console.log('当前层数', i)
      this.$Modal.confirm({
        title: '提示',
        content: '确认删除此层么？',
        loading: this.cengLoading,
        onOk: () => {
          const newCeng = {
            id: this.floordata[i].id
          }
          auditmailfloor_updatedelfloor(newCeng).then(res => {
            if (res.data.errcode === 0) {
              this.$Modal.remove()
              if (i > -1) {
                this.floordata.splice(i, 1)
                let arr = this.floordata.slice(i)
                this.floordata.splice(i)
                arr.forEach((item) => {
                  this.floordata.push(item)
                })
              }
              this.$Message.success('操作成功')
            } else {
              this.$Modal.remove()
              this.$Message.error('操作失败')
            }
          })
          // 后续层户自动变
          /* if (i > -1) {
              this.floordata.splice(i, 1)
              let arr = this.floordata.slice(i)
              // console.log('新数组', arr)
              arr.forEach((item) => {
                // console.log(item.title)
                let num = item.title.split('')
                let newNum = (parseInt(num[0]) - 1) + 'F'
                // console.log('--', newNum)
                item.title = newNum
                // console.log('修改后', item.title)
                item.list.forEach((Hu) => {
                  // console.log(Hu.title)
                  let HuNum = Hu.title.split('-')
                  let newHuNum = HuNum[0] + '-' + (parseInt(HuNum[1]) - 1) + '-' + HuNum[2]
                  // console.log('新户名', newHuNum)
                  Hu.title = newHuNum
                })
              })
              this.floordata.splice(i)
              arr.forEach((item) => {
                this.floordata.push(item)
              })
            } */
        },
        onCancel: () => {
        }
      })
    },
    // 插入户
    insertHu (i) {
      // console.log('当前层序号', i)
      // console.log('当前数据', this.floordata[i])
      // console.log('1111', this.floordata[i])
      let huLength = 0
      if (this.floordata[i].list === undefined) {
        this.floordata[i]['list'] = []
      } else {
        huLength = this.floordata[i].list.length
      }
      let sort = 0
      if (parseInt(huLength) === 0) {
        sort = 0
      } else {
        sort = parseInt(this.floordata[i].list[huLength - 1].asort) + 10
      }
      // console.log('排序号', sort)
      const newHu = {
        level: '104',
        path: this.currentPath + this.floordata[i].id + '-',
        pid: this.floordata[i].id,
        title: '未定义',
        asort: sort
      }
      this.loading2 = true
      auditmailfloor_create(newHu).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success('操作成功')
          this.floordata[i].list.push(newHu)
          this.loading2 = false
          this.$emit('refresh')
        } else {
          this.loading2 = false
          this.$Message.error('操作失败')
        }
      })
      // if (i > -1) {
      //   let huList = this.floordata[i].list
      //   if (this.floordata[i].list.length === 0) {
      //     huTitle = this.unit + '-' + (i + 1) + '-' + '1'
      //   } else {
      //     let huTitle2 = this.floordata[i].list[huList.length - 1].title
      //     let newTitle = huTitle2.split('-')
      //     huTitle = this.unit + '-' + (i + 1) + '-' + (parseInt(newTitle[2]) + 1)
      //   }
      // }
    },
    // 保存层
    saveCeng (i, title) {
      const newCeng = {
        id: this.floordata[i].id,
        title: this.currentCeng
      }
      auditmailfloor_create(newCeng).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success('操作成功')
          this.floordata[i].title = this.currentCeng
          this.editCeng = -1
          this.currentCeng = ''
        } else {
          this.$Message.error('操作失败')
        }
      })
    },
    // 取消层
    cancelCeng () {
      this.$Message.info('操作已取消')
      this.editCeng = -1
      this.currentCeng = ''
    },
    // 上移
    async up (i) {
      let temp = 0
      temp = this.floordata[i].asort
      this.floordata[i].asort = this.floordata[i - 1].asort
      this.floordata[i - 1].asort = temp
      this.loadingUp = true
      const newCeng1 = {
        id: this.floordata[i].id,
        asort: this.floordata[i].asort
      }
      let res = await auditmailfloor_create(newCeng1)
      if (res.data.errcode === 0) {
        const newCeng2 = {
          id: this.floordata[i - 1].id,
          asort: this.floordata[i - 1].asort
        }
        auditmailfloor_create(newCeng2).then(res => {
          if (res.data.errcode === 0) {
            this.loadingUp = false
            this.$emit('refresh')
            this.$Message.success('操作成功')
          } else {
            this.loadingUp = false
            this.$Message.error('操作失败')
          }
        })
      } else {
        this.loadingUp = false
        this.$Message.error('操作失败')
      }
    },
    // 下移
    async down (i) {
      // console.log('下移', i)
      // console.log('当前元素', this.floordata[i])
      // console.log('下一个元素', this.floordata[i + 1])
      // console.log(this.floordata[i].asort, '--', this.floordata[i + 1].asort)
      let temp = 0
      temp = this.floordata[i].asort
      this.floordata[i].asort = this.floordata[i + 1].asort
      this.floordata[i + 1].asort = temp
      // console.log(this.floordata[i].asort, '--', this.floordata[i + 1].asort)
      this.loadingDown = true
      const newCeng1 = {
        id: this.floordata[i].id,
        asort: this.floordata[i].asort
      }
      let res = await auditmailfloor_create(newCeng1)
      // console.log('======', res)
      if (res.data.errcode === 0) {
        const newCeng2 = {
          id: this.floordata[i + 1].id,
          asort: this.floordata[i + 1].asort
        }
        auditmailfloor_create(newCeng2).then(res => {
          if (res.data.errcode === 0) {
            this.loadingDown = false
            this.$emit('refresh')
            this.$Message.success('操作成功')
          } else {
            this.loadingDown = false
            this.$Message.error('操作失败')
          }
        })
      } else {
        this.loadingDown = false
        this.$Message.error('操作失败')
      }
    },
    // 左移
    async back (i, j) {
      // console.log('左移', i, '  ', j)
      // console.log('前', this.floordata[i].list[j].asort, '--', this.floordata[i].list[j - 1].asort)
      let temp = 0
      temp = this.floordata[i].list[j].asort
      this.floordata[i].list[j].asort = this.floordata[i].list[j - 1].asort
      this.floordata[i].list[j - 1].asort = temp
      // console.log('后', this.floordata[i].list[j].asort, '--', this.floordata[i].list[j - 1].asort)
      this.loadingBack = true
      const newCeng1 = {
        id: this.floordata[i].list[j].id,
        asort: this.floordata[i].list[j].asort
      }
      let res = await auditmailfloor_create(newCeng1)
      if (res.data.errcode === 0) {
        const newCeng2 = {
          id: this.floordata[i].list[j - 1].id,
          asort: this.floordata[i].list[j - 1].asort
        }
        auditmailfloor_create(newCeng2).then(res => {
          if (res.data.errcode === 0) {
            this.loadingBack = false
            this.$emit('refresh')
            this.$Message.success('操作成功')
          } else {
            this.loadingBack = false
            this.$Message.error('操作失败')
          }
        })
      } else {
        this.loadingBack = false
        this.$Message.error('操作失败')
      }
    },
    // 右移
    async forward (i, j) {
      // console.log('右移', i, '  ', j)
      // console.log('前', this.floordata[i].list[j].asort, '--', this.floordata[i].list[j + 1].asort)
      let temp = 0
      temp = this.floordata[i].list[j].asort
      this.floordata[i].list[j].asort = this.floordata[i].list[j + 1].asort
      this.floordata[i].list[j + 1].asort = temp
      // console.log('后', this.floordata[i].list[j].asort, '--', this.floordata[i].list[j + 1].asort)
      this.loadingForward = true
      const newCeng1 = {
        id: this.floordata[i].list[j].id,
        asort: this.floordata[i].list[j].asort
      }
      let res = await auditmailfloor_create(newCeng1)
      if (res.data.errcode === 0) {
        const newCeng2 = {
          id: this.floordata[i].list[j + 1].id,
          asort: this.floordata[i].list[j + 1].asort
        }
        auditmailfloor_create(newCeng2).then(res => {
          if (res.data.errcode === 0) {
            this.loadingForward = false
            this.$emit('refresh')
            this.$Message.success('操作成功')
          } else {
            this.loadingForward = false
            this.$Message.error('操作失败')
          }
        })
      } else {
        this.loadingForward = false
        this.$Message.error('操作失败')
      }
    }
  },
  watch: {},
  mounted () {
    // console.log('floordata', this.floordata)
  }

}
</script>

<style scoped>
  .ml10 {
    margin-left: 10px;
  }

  .ml5 {
    margin-left: 5px;
  }

  .mt10 {
    margin-top: 10px;
  }

  .fl {
    float: left;
  }

  .text-center {
    text-align: center;
  }

  .mt5 {
    margin-top: 5px;
  }

  .pointer {
    cursor: pointer;
  }

  .btn {
    display: inline-block;
  }

  .hu_input {
    width: 80px;
  }

  .cengTitle {
    margin-top: 2px;
  }

  .huDiv{
    border-radius: 3px;
    border: 1px solid #e8e8e8;
  }

  .huDiv:hover {
    background: #f8f8f9;
    /*border-color: #57a3f3;*/
    box-shadow: 0 0 0 2px rgba(45, 183, 245, 0.2);
    transition: border 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  }
</style>
